<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        body {
            margin: 0;
            height: auto;
            min-height: 100vh;
            line-height: 1;
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        #pro1-swiper .swiper-slide {
            height: 10rem;
        }

        .aui-tab-item.aui-active {
            color: #ff0137;
            border-bottom: 2px solid transparent;
        }

        .aui-tab-item {
            color: #999;
        }

        .aui-tab-item.up_down::before {
            content: '';
            border: 4px solid transparent;
            border-bottom: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0px;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(-60%);
        }

        .aui-tab-item.up_down::after {
            content: '';
            border: 4px solid transparent;
            border-top: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(60%);
        }

        .aui-tab-item.aui-active.up_down.up::before {
            border-bottom-color: #ff0137;
        }

        .aui-tab-item.aui-active.up_down.down::after {
            border-top-color: #ff0137;
        }

        .pro_list {
            padding-bottom: 1rem;
        }

        .pro_list_inner {
            width: 48%;
            margin: 1%;
            background: #fff;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }

        .pro_list_img {}

        .pro_list_text {
            text-align: left;
            padding: 0.5rem;
        }

        .pro_list_text h4 {
            font-size: 0.65rem;
            color: #010101;
            height: 1.45rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0.3rem;
        }

        .pro_list_text h5 {
            font-size: 0.7rem;
            color: #f23030;
            font-family: cursive;
            font-weight: 600;
            padding: 0.2rem 0;
        }

        .pro_list_text h5 span.xp{
          background: #f23030;
          font-size: 0.5rem;
          color: #fff;
          padding: 0.2rem 0.2rem 0.05rem 0.2rem;
          border-radius: 10px;
          margin-left: 0.5rem;
        }

        .pro_list_text h6 {
          font-family: cursive;
          font-size: 0.5rem;
          text-decoration: line-through;
          color: #999;
        }

        .pro_list_text p {
            color: #fff;
            padding: 0 0.2rem;
            font-size: 0.7rem;
            position: absolute;
            top: 0;
            left: 0;
            background: #ff6565;
        }

        #tab {
            z-index: 1
        }

        .tip_zp{
          position: absolute;
          top: 0.2rem;
          left: 0.2rem;
          background: #f23030;
          font-size: 0.5rem;
          color: #fff;
          padding: 0.2rem 0.2rem 0.05rem 0.2rem;
          border-radius: 2px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-refresh-content">
            <div class="pro_list clearfix">
                <div class="pro_list_inner fl" v-for="item in goodsList" @click="openDetail(item.goods_name, item.goods_id)">
                    <div class="pro_list_img">
                        <div :style="'background: url('+item.logo_pic+') no-repeat center/cover; height: 8rem'"></div>
                    </div>
                    <div class="pro_list_text">
                        <h4>{{item.goods_name}}</h4>
                        <h5>￥{{item.price}}</h5>
                        <h6>￥{{item.oprice}}</h6>
                    </div>

                      <div class="tip_zp" v-if='item.including_gifts==1'>含赠品</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

    apiready = function() {



        var app = new Vue({
            el: '#app',
            data: {
                goodsList: [],
                page: 1,
                sort: 1,
                info: {}
            },
            created: function() {
                var $_this = this;
                api.showProgress({
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });
                api.ajax({
                  url: window.Url.Freesource_index,
                  method: 'post',
                  data: {
                      values: {
                          type: 1,
                          token: $api.getStorage('token'),
                          cateId: ""
                      }
                  }
                }, function(ret, err) {
                    if (ret) {

                      if(ret.re==1){
                        $_this.goodsList = ret.data.goods_recommend;

                        console.log("好货特卖----"+JSON.stringify($_this.goodsList));
                        $_this.$nextTick(function(){
                          $('.pro_list_img div').height($('.pro_list_img div').width())
                        })

                      }
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
            },
            methods: {
                openDetail: function(name, id) {
                    api.openWin({
                        name: 'commodity_convert',
                        url: '../one_frame/commodity_convert.html',
                        pageParam: {
                            name: name,
                            id: id
                        }
                    })
                }
            },
            mounted: function() {
                var $_this = this;
                api.hideProgress()
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    if (ret.status == "success") {
                        api.ajax({
                          url: window.Url.Freesource_index,
                          method: 'post',
                          data: {
                              values: {
                                  type: 1,
                                  token: $api.getStorage('token'),
                                  cateId: ""
                              }
                          }
                        }, function(ret, err) {
                            if (ret) {
                                setTimeout(function() {
                                    $_this.goodsList = ret.data.goods_recommend;
                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                }, 500)

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })

                    }
                })
            }
        })
    }
</script>

</html>
